<template>
	<div class="blog-category-container" v-loading="isLoading">
		<h2>文章分类</h2>
		<RightList :list="list" @select="handleSelect" />
	</div>
</template>

<script>
import RightList from "./RightList.vue";
import fetchDatas from "@/mixins/fetchDatas";
import { getBlogType } from "@/api/getBlog";
export default {
	mixins: [fetchDatas([])],
	components: { RightList },
	computed: {
		routeinfo() {
			//获取路由信息
			const categoryId = +this.$route.params.categoryId || -1;
			const limit = +this.$route.query.limit || 10;
			const page = +this.$route.query.page || 1;
			return {
				categoryId,
				limit,
				page,
			};
		},
		list() {
			//计算出总篇数
			const articleCounttotal = this.datas.reduce(
				(a, b) => a + b.articleCount,
				0
			);
			const result = [
				{ name: "全部分类", id: -1, articleCount: articleCounttotal },
				...this.datas,
			];
			return result.map((it) => ({
				...it,
				isSelected: it.id === this.routeinfo.categoryId,
				aside: `${it.articleCount}篇`,
			}));
		},
	},
	methods: {
		async fetchData() {
			return await getBlogType();
		},
		handleSelect(item) {
			const query = {
				page: 1,
				limit: this.routeinfo.limit,
			};

			// 跳转到 当前的分类id  当前的页容量  newPage的页码
			if (item.id === -1) {
				//当前没有分类
				// /article?page=${newPage}&limit=${this.routeInfo.limit}
				this.$router.push({
					name: "Blog",
					query,
				});
			} else {
				// /article/cate/${this.routeInfo.categoryId}?page=${newPage}&limit=${this.routeInfo.limit}
				this.$router.push({
					name: "CategoryBlog",
					params: {
						categoryId: item.id,
					},
					query,
				});
			}
		},
	},
};
</script>

<style scoped lang="less">
.blog-category-container {
	position: relative;
	width: 300px;
	height: 100%;
	padding: 20px;
	overflow-y: auto;
	h2 {
		margin: 0;
		font-size: 1em;
		font-weight: bold;
		letter-spacing: 2px;
	}
}
</style>
